// set loading animation
var loadingIcon = document.getElementById('loading-icon');
var rotateAng = 5.5;
function loadingIconRotate() {
    loadingIcon.style.transform = 'rotate(' + rotateAng + 'deg)';
    rotateAng = (rotateAng + 5.5) % 360;
    animationId = requestAnimationFrame(loadingIconRotate);
}
var animationId = requestAnimationFrame(loadingIconRotate);
setTimeout(function() {
    cancelAnimationFrame(animationId);
    document.body.removeChild(document.getElementById('loading'));
}, 10000);

var domLeft = document.getElementById('number-left-score');
var scoreLeft = new Scoreboard(domLeft, 10000000, 72, 90);
var domRight = document.getElementById('number-right-score');
var scoreRight = new Scoreboard(domRight, 10000, 72, 90);
var domMiddle = document.getElementById('number-middle-score');
var scoreMiddle = new Scoreboard(domMiddle, 235985246, 82, 90);

// init minemap
minemap.domainUrl = '//minedata.cn';
minemap.spriteUrl = '//minedata.cn/minemapapi/v1.3/sprite/sprite';
minemap.serviceUrl = '//minedata.cn/service';
minemap.accessToken = '9e09973e6f694b2592bc34b3688c6cff';
minemap.solution = 3734;
var map = new minemap.Map({
    container: 'map',
    style: "//minedata.cn/service/solu/style/id/3734",
    center: [105.4066765, 42.9079326],
    zoom: 3.5,
    // dragPan: false, //禁止移动地图
    pitch: 0
});
map.repaint = true;

var backgroundId = null;

// map.on('load', function () {
//     // get background layers id
//     backgroundId = map.getStyle().layers.map(function(element) {
//         return element.id;
//     });
    
//     map.addSource("scatterPoints-1", {
//         "type": "vector",
//         'tiles': ['//minedata.cn/datademo/dynamicdemo/zhonghuan_recent4/1/{z}/{x}/{y}']
//     });

//     map.addSource("scatterPoints-2", {
//         "type": "vector",
//         'tiles': ['//minedata.cn/datademo/dynamicdemo/zhonghuan_recent4/2/{z}/{x}/{y}']
//     });

//     map.addSource("scatterPoints-3", {
//         "type": "vector",
//         'tiles': ['//minedata.cn/datademo/dynamicdemo/zhonghuan_recent4/3/{z}/{x}/{y}']
//     });

//     map.addSource("scatterPoints-4", {
//         "type": "vector",
//         'tiles': ['//minedata.cn/datademo/dynamicdemo/zhonghuan_recent4/4/{z}/{x}/{y}']
//     });

//     map.addLayer({
//         "id": 'scatter-low-a',
//         "type": "circle",
//         "source": "scatterPoints-1",
//         "source-layer": "zhonghuan_recent4",
//         'paint': {
//             'circle-radius': 2,
//             'circle-color': 'rgba(37, 140, 249, 0.8)',
//             'circle-opacity': 0.7
//         }
//     });
    
//     map.addLayer({
//         "id": 'scatter-mid-a',
//         "type": "circle",
//         "source": "scatterPoints-1",
//         "source-layer": "zhonghuan_recent4",
//         'paint': {
//             'circle-radius': 1.5,
//             'circle-color': 'rgba(14, 241, 242, 0.6)',
//             'circle-opacity': 0.7
//         }
//     });

//     map.addLayer({
//         "id": 'scatter-high-a',
//         "type": "circle",
//         "source": "scatterPoints-1",
//         "source-layer": "zhonghuan_recent4",
//         'paint': {
//             'circle-radius': 1,
//             'circle-color': 'rgba(255, 255, 255, 0.4)',
//             'circle-opacity': 0.7
//         }
//     });

//         map.addLayer({
//         "id": 'scatter-low-b',
//         "type": "circle",
//         "source": "scatterPoints-2",
//         "source-layer": "zhonghuan_recent4",        
//         'paint': {
//             'circle-radius': 2,
//             'circle-color': 'rgba(37, 140, 249, 0.8)',
//             'circle-opacity': 0.7
//         }
//     });

//     map.addLayer({
//         "id": 'scatter-mid-b',
//         "type": "circle",
//         "source": "scatterPoints-2",
//         "source-layer": "zhonghuan_recent4",
//         'paint': {
//             'circle-radius': 1.5,
//             'circle-color': 'rgba(14, 241, 242, 0.6)',
//             'circle-opacity': 0.7
//         }
//     });

//     map.addLayer({
//         "id": 'scatter-high-b',
//         "type": "circle",
//         "source": "scatterPoints-2",
//         "source-layer": "zhonghuan_recent4",
//         'paint': {
//             'circle-radius': 1,
//             'circle-color': 'rgba(255, 255, 255, 0.4)',
//             'circle-opacity': 0.7
//         }
//     });

//     map.addLayer({
//         "id": 'scatter-low-c',
//         "type": "circle",
//         "source": "scatterPoints-3",
//         "source-layer": "zhonghuan_recent4",        
//         'paint': {
//             'circle-radius': 2,
//             'circle-color': 'rgba(37, 140, 249, 0.8)',
//             'circle-opacity': 0.7
//         }
//     });

//     map.addLayer({
//         "id": 'scatter-mid-c',
//         "type": "circle",
//         "source": "scatterPoints-3",
//         "source-layer": "zhonghuan_recent4",
//         'paint': {
//             'circle-radius': 1.5,
//             'circle-color': 'rgba(14, 241, 242, 0.6)',
//             'circle-opacity': 0.7
//         }
//     });

//     map.addLayer({
//         "id": 'scatter-high-c',
//         "type": "circle",
//         "source": "scatterPoints-3",
//         "source-layer": "zhonghuan_recent4",
//         'paint': {
//             'circle-radius': 1,
//             'circle-color': 'rgba(255, 255, 255, 0.4)',
//             'circle-opacity': 0.7
//         }
//     });

//     map.addLayer({
//         "id": 'scatter-low-d',
//         "type": "circle",
//         "source": "scatterPoints-4",
//         "source-layer": "zhonghuan_recent4",        
//         'paint': {
//             'circle-radius': 2,
//             'circle-color': 'rgba(37, 140, 249, 0.8)',
//             'circle-opacity': 0.7
//         }
//     });

//     map.addLayer({
//         "id": 'scatter-mid-d',
//         "type": "circle",
//         "source": "scatterPoints-4",
//         "source-layer": "zhonghuan_recent4",
//         'paint': {
//             'circle-radius': 1.5,
//             'circle-color': 'rgba(14, 241, 242, 0.6)',
//             'circle-opacity': 0.7
//         }
//     });

//     map.addLayer({
//         "id": 'scatter-high-d',
//         "type": "circle",
//         "source": "scatterPoints-4",
//         "source-layer": "zhonghuan_recent4",
//         'paint': {
//             'circle-radius': 1,
//             'circle-color': 'rgba(255, 255, 255, 0.4)',
//             'circle-opacity': 0.7
//         }
//     });

//     for(var i = 0; i < backgroundId.length; i++) {
//         map.moveLayer(backgroundId[i], 'scatter-low-d');
//     }

//     setInterval(function() {
//         carousel();
//     }, 1000);

//     setInterval(function() {
//         update = true;
//     }, 300000);
// });


var seq = ['d', 'c', 'b', 'a'];
var update = false;
var addLayer = false;
var updateId = 'd';

function carousel() {
    if(update) {
        seq.splice(seq.indexOf(updateId), 1);
        map.moveLayer('scatter-low-' + updateId, 'scatter-low-' + seq[seq.length - 1]);
        map.moveLayer('scatter-mid-' + updateId, 'scatter-low-' + seq[seq.length - 1]);
        map.moveLayer('scatter-high-' + updateId, 'scatter-low-' + seq[seq.length - 1]);

        var nextUpdate = '';
        var sourceId = 0;
        switch(updateId)
        {
            case 'a':
                nextUpdate = 'd';
                sourceId = 1;
                break;
            case 'b':
                nextUpdate = 'a';
                sourceId = 2;
                break;
            case 'c':
                nextUpdate = 'b';
                sourceId = 3;
                break;
            case 'd':
                nextUpdate = 'c';
                sourceId = 4;
                break;
            default:
                console.error('update error!');
                break;
        }

        map.removeSource("scatterPoints-" + sourceId);
        map.addSource("scatterPoints-" + sourceId, {
            "type": "vector",
            'tiles': ['//minedata.cn/datademo/dynamicdemo/zhonghuan_recent4/' + sourceId +'/{z}/{x}/{y}']
        });

        setTimeout(function() {
            addLayer = true;
        }, 5000);
        update = false;

        console.log('update completed');
        console.log(seq);
        console.log(map.style._order);
    }

    if(addLayer) {
        var nextUpdate = '';
        var nextLayer = '';
        switch(updateId)
        {
            case 'a':
                nextLayer = 'b';
                nextUpdate = 'd';
                break;
            case 'b':
                nextLayer = 'c';
                nextUpdate = 'a';
                break;
            case 'c':
                nextLayer = 'd';
                nextUpdate = 'b';
                break;
            case 'd':
                nextLayer = 'a';
                nextUpdate = 'c';
                break;
            default:
                console.error('update layer error!');
                break;
        }

        seq.splice(seq.indexOf(nextLayer) + 1, 0, updateId);
        map.moveLayer('scatter-low-' + updateId, 'scatter-low-' + nextLayer);
        map.moveLayer('scatter-mid-' + updateId, 'scatter-low-' + nextLayer);
        map.moveLayer('scatter-high-' + updateId, 'scatter-low-' + nextLayer);   
        
        if(updateId !== 'a') {
            updateId = nextUpdate;
            addLayer = false;
            update = true;
        }
        else {
            updateId = nextUpdate;
            addLayer = false;
            update = false;
        }

        console.log('addLayer completed');  
        console.log(seq);
        console.log(map.style._order);
    }
    map.moveLayer('scatter-low-' + seq[0], 'scatter-low-' + seq[seq.length - 1]);
    map.moveLayer('scatter-mid-' + seq[0], 'scatter-low-' + seq[seq.length - 1]);
    map.moveLayer('scatter-high-' + seq[0], 'scatter-low-' + seq[seq.length - 1]);   

    seq.push(seq.shift());

    for(var i = 0; i < backgroundId.length; i++) {
        map.moveLayer(backgroundId[i], 'scatter-low-' + seq[0]);
    }
}

function getSeq() {
    console.log(seq);
    console.log(map.style._order);
}